<template>
  <div class="nowplaying">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="check"
      @load="onLoad"
    >
      <div class="item" v-for="item in list" :key="item.filmId" @click="gotoDetail(item.filmId)">
        <div class="left">
          <img :src="item.poster" />
        </div>
        <div class="middle">
          <div>{{ item.name }} {{ item.filmType.name }}</div>
          <div>观众评分 {{ item.grade }}</div>
          <div class="actor">主演:{{ item.actor }}</div>
          <!-- <div>主演:{{ item.actors|filterActors }}</div> -->
          <div>{{ item.nation }}|{{ item.runtime }}</div>
        </div>
        <div class="right">
          <button @click.stop="buy(item.filmId)">购票</button>
        </div>
      </div>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { nowPlayingQuery } from "../model/maizuo";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      check: false,
      refreshing:false,
      pageNum: 1, //表示第一页
      total:100,
    };
  },
  filters: {
    filterActors(actors) {
      //是一个集合
      return actors.map((item) => item.name).join(" ");
    },
  },
  methods: {
    buy(id){
      // alert("去买这个电影的票"+id);
     // window.event.stopPropagation();
     this.$router.push("/filmbuy/"+id);
    },
    gotoDetail(id){
      this.$router.push("/filmdetail/"+id);

    },
    onRefresh(){//下拉刷新事件
      this.pageNum =1;
      this.refreshing=false;
      this.finished=false;
      this.list = [];
      this.search();

    },
    onLoad() {//上拉加载事件
        this.pageNum++;
        this.search();
    },
    async search() {
      let res = await nowPlayingQuery({
        cityId: 310100,
        pageNum: this.pageNum,
        pageSize: 10,
        type: 1,
        k: 2787016,
      });
      // console.log(res);
      this.list.push(...res.data.data.films.map((item) => {
        item.actor = item.actors.map((item) => item.name).join(" ");
        return item;
      }));
      this.total = res.data.data.total;
      this.loading=false;
      if(this.list.length>=this.total){
        this.finished = true;
      }

    },
  },
  async mounted() {
    this.search();
  },
};
</script>

<style scoped lang="scss">
.nowplaying {
  margin-bottom: 50px;
}
.item {
  display: flex;
  margin-top: 15px;
  .left {
    flex: 1;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .middle {
    flex: 4;
    min-width: 0;
    .actor {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
